<template>
    <div class="attr-content" @click.stop>
        <NavBar v-if="attributes.type == -1" />
        <GlobalStyle v-if="attributes.type == -2" />
        <Navigate v-if="attributes.type == 1"/>
        <ImageText v-if="attributes.type == 2"/>
    </div>
</template>

<script>
import {mapState} from 'vuex'
import NavBar from './attr/nav_bar'
import GlobalStyle from './attr/global_style'

import Navigate from './attr/navigate'
import ImageText from './attr/image_text'
export default {
    components:{ NavBar, GlobalStyle, Navigate, ImageText },
    data() {
        return {
            
            
        }
    },
    computed:{
		...mapState(['attributes'])
    },
    methods: {
        
    },
}
</script>

<style lang="scss" scoped>
.attr-content{width: 400px;height: 100%;background: #fff;overflow-x: hidden;box-shadow: -4px 0px 9px 0px #afafaf45;position: absolute;right: 0;top: 0;z-index: 99;;
    .tab{display: flex;align-items: center;height: 50px;border-bottom: 1px solid #eee;position: sticky;top: 0;z-index: 3;background: #fff;box-shadow:0 3px 5px 0px #c7c7c745;
        &>li{flex: none;width: 200px;text-align: center;font-size: 15px;color: #666;line-height: 50px;border-right: 1px solid #eee;user-select: none;
            &:hover{cursor: pointer;}
            &.li-active{color: #409eff;position: relative;
                &::after{position: absolute;bottom: 0;left: 50%;transform: translateX(-50%);clear: both;content: '';display: block;width: 40px;height: 2px;background: #409eff}
            }
        }
    }
    &-box{box-sizing: border-box;
        >h2{color: #333;font-size: 14px;font-weight: bold;border-bottom: 1px solid #eee;line-height: 40px;padding: 0 10px;box-sizing: border-box;}
    }
}
</style>

